<template>
  <div>
    <mu-appbar class="dd-appbar" title="灰兔子影吧">
      <mu-icon-button icon="menu" v-show="!showMenu" slot="left" @click="toggle(true)"/>

      <mu-flat-button v-show="showMenu" @click="routeTo('/movie')" label="电影" slot="right"/>
      <mu-flat-button v-show="showMenu" @click="routeTo('/tv')" label="电视剧" slot="right"/>
      <mu-flat-button v-show="showMenu" @click="routeTo('/cartoon')" label="动漫" slot="right"/>

      <mu-icon-button icon="search" slot="right" @click="routeTo('/searchPage')"/>
      <!--<mu-icon-menu icon="search" slot="right" @change="handleMenuChange" :open="menuOpen" @open="handleMenuOpen"-->
      <!--@close="handleMenuClose" :value="menuValue">-->
      <!--<mu-menu-item value="1" @click="routeTo('/searchPage')" title="影片搜索"/>-->
      <!--<mu-menu-item value="2" title="关于我们"/>-->
      <!--</mu-icon-menu>-->
    </mu-appbar>

    <mu-drawer :open="open" :docked="docked" @close="toggle()">
      <mu-appbar title="灰兔子影吧"/>
      <mu-list @itemClick="docked ? '' : toggle()">
        <mu-list-item @click="routeTo('/movie')" title="电影"/>
        <mu-list-item @click="routeTo('/tv')" title="电视剧"/>
        <mu-list-item @click="routeTo('/cartoon')" title="动漫"/>
        <mu-divider/>
        <mu-list-item @click="routeTo('/about')" title="联系我"/>
      </mu-list>
    </mu-drawer>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        screenWidth: window.screen.width,
        open: false,
        showMenu: true,
        docked: true,
        menuValue: '1',
        menuOpen: false
      }
    },
    mounted () {
      const that = this
      // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
      this.screenWidth = window.screen.width
      this.showMenu = that.screenWidth > 500
      // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
      window.onresize = function () {
        return (function () {
          window.screenWidth = window.screen.width
          that.screenWidth = window.screenWidth
          that.showMenu = that.screenWidth > 500
        })()
      }
    },
    methods: {
      handleMenuChange (val) {
        this.value = val
      },
      handleMenuOpen () {
        this.menuOpen = true
      },
      handleMenuClose () {
        this.menuOpen = false
      },
      routeTo: function (str) {
        const path = str
        this.$router.push({path: path})
      },
      toggle (flag) {
        this.open = !this.open
        this.docked = !flag
      }
    }
  }
</script>

<style lang="css">
  .appbar-search-field {
    color: #FFF;
    margin-bottom: 0;
  }

  .appbar-search-field .focus-state {
    color: #FFF;
  }

  .appbar-search-field .mu-text-field-hint {
    color: #ffffff;
  }

  .appbar-search-field .mu-text-field-input {
    color: #FFF;
  }

  .appbar-search-field .mu-text-field-focus-line {
    background-color: #FFF;
  }
</style>
